import React from 'react'
import Topbar from '../../components/Topbar/Topbar';
import {Link} from 'react-router-dom'

import './Login.css'
class Login extends React.Component {

	constructor(props) {
	  super(props);
	  this.state = {

	  };
	}

    userLogin(){
        //验证是否存在此用户，user/phonenumber 返回数据为空即为不存在
        const url='https://www.prebeauty.work/userlogin/login'
        const param={
            tel:this.state.tel,
            password:this.state.pwd
        }
        fetch(url,{
            method:'POST',
            body:JSON.stringify(param),
            headers:{
                'content-type': 'application/json'
            }
        }).then((res)=>{
            if(res.status===200){
                res.json().then((data)=> {
                    if(data.code=='failed'){
                        //用户不存在，跳转至注册页面
                        alert('用户不存在！请进行注册！')
                        this.props.history.push('/Logon')
                    }else if(data.code=='success'){
                        //用户存在，跳转至首页，localStorage中存储用户信息和token
                        
                        localStorage.setItem('token',data.token)
                        localStorage.setItem('userid',data.data.id)
                        localStorage.setItem('usertel',data.data.tel)
                        localStorage.setItem('username',data.data.name)
                        localStorage.setItem('userimage',data.data.image)
                        localStorage.setItem('useremail',data.data.email)
                        localStorage.setItem('userbirth',data.data.birth)

                        this.props.history.push('/')
                    }
                })
            }else {
                alert("出现一个问题");
            }
        })
    }

    telChange(e){
        this.setState({
            tel:e.target.value
        })
    }
    pwdChange(e){
        this.setState({
            pwd:e.target.value
        })
    }

	render() {
        return (
            <div>
                <Topbar name="登录" />
                <div className="logodiv">
                    <img 
                        src='https://www.prebeauty.work/static/media/logo.d39a7ba3.png' 
                        alt='' 
                        className="logo" 
                    />
                </div>
                <div className="teldiv">
                    <p className="text">手机号：</p>
                    <input 
                        type='tel' 
                        className="tel" 
                        placeholder="请输入有效的手机号码"
                        onChange={this.telChange.bind(this)}
                    ></input>
                </div>
                <div className="pwddiv">
                    <p className="text">密码：</p>
                    <input 
                        type='password' 
                        className="pwd" 
                        placeholder="请输入登录密码"
                        onChange={this.pwdChange.bind(this)}
                    ></input>
                </div>
                <div className="logondiv">
                    <Link 
                        to={{pathname:'/Logon',state:{}}}
                        className="logon"
                    >快速注册&gt;&gt;&gt;&gt;</Link>
                </div>
                <input type='button' className="btn" value="登录" onClick={this.userLogin.bind(this)}></input>
            </div>
        )
    }
}

export default Login